<template>
  <div>
    <el-carousel :interval="4000" type="card" height="500px">
      <el-carousel-item v-for="item in imgs" :key="item">
        <img :src="item" style="width:100%">
      </el-carousel-item>
    </el-carousel>

    <el-row :gutter="20" >
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
            <img src="http://localhost:9090/files/9d30cfa1d1f54c1c9704ae2a5af0c8ff_santi.jpg" @click="detail({id:'1'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">三体</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">刘慈欣</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/188efef119984a858f50cfde35968af2_biancheng.jpg" @click="detail({id:'2'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">边城</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">沈从文</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/c9a7c4cebf8e4fa981df72b4c3a2afc1_wrsh.jpg" @click="detail({id:'3'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">无人生还</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">阿加莎·克里斯蒂</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/1033defabc9843be8806bce6842f01d6_baiyexing.jpg" @click="detail({id:'4'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">白夜行</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">东野圭吾</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" >
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/5b27d0a3e4db409ab3c825290ee97060_活着.jpg" @click="detail({id:'5'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">活着</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">余华</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/1eeb306dcd7a47b490a137396518858b_wzzz.jpg" @click="detail({id:'17'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">无罪之证</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">紫金陈</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/2cee0193c2c54327916f401b1cef02db_xg.jpg" @click="detail({id:'19'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">雪国</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">[日]川端康成</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/d9913d0010fe463c83885bd221d48907_fsr.jpg" @click="detail({id:'8'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">仿生人会梦到电子羊吗？</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">[美国]菲利普?迪克</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" >
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/47ee799e45d74dcbb37a80db8756f844_lldq.jpg" @click="detail({id:'20'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">流浪地球</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">刘慈欣</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/90da6d4674b04132b8b4215ca43a5ec1_mj.jpg" @click="detail({id:'12'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">魔戒三部曲</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">[英]J.R.R.托尔金</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/127b64ae6b1d4eab954223714bc5f7e4_wedh.jpg" @click="detail({id:'6'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">瓦尔登湖</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">梭罗</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/980f9ff84fa74eeca04191db430f957d_xlz.jpg" @click="detail({id:'18'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">心理罪:暗河</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">雷米</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" >
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/5153a81522a042de9bf938848563bc68_addyx.jpg" @click="detail({id:'10'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">安德的游戏</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">【美】奥森·斯科特·卡德</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/74586f0aef6b4ed3b1647c56dbde6b3c_hlbt.jpg" @click="detail({id:'15'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">哈利波特与魔法石</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">（英）J.K.罗琳</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/082029e2acd14d09bcb1902fc15634c1_lmr.jpg" @click="detail({id:'16'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">猎魔人 卷一：白狼崛起(修订本)</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">[波兰] 安杰伊·萨普科夫斯基</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/f9994498b5e74c69a50c3d1a4915da2a_clqy.jpg" @click="detail({id:'7'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">灿烂千阳</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">[美]卡勒德·胡赛尼</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" >
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/def53a8575144e5dbef5f687a4bec8d6_sq.jpg" @click="detail({id:'11'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">沙丘</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">（美）弗兰克赫伯特</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/e887a648a2d543ee9b73d469db640b1d_xr.jpg" @click="detail({id:'9'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">雪人</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">[挪威] 尤· 奈斯博</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/e6724172e3aa4bb49aff1c892dd0bd4d_kslsh.jpg" @click="detail({id:'14'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">克苏鲁神话</span>
            <div style="margin: 20px 0">
              <span style="font-size: 25px">H.P.洛夫克拉夫特</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow="hover" style="margin: 20px 20px">
          <img src="http://localhost:9090/files/f3a7d3c5f6404c77a4467ba75c985248_byhzg.jpg" @click="detail({id:'13'})" style="width: 300px; height: 400px"/>
          <div style="padding: 14px">
            <span style="font-size: 30px">冰与火之歌</span>
            <div style="margin: 20px 0">
             <span style="font-size: 25px">乔治·R.R.马丁</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <div style="margin: 10px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>


<script>
import request from "../../utils/request";
export default {
  name: "Index",
  data() {
    return {
      booksData: [],
      search:'',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      imgs:[
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F12dd8f99-e532-461b-86f8-ba61ffd9c645%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675005542&t=fe011e3e21fcef69e684d51cfc7d781c',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpad.mydrivers.com%2Fimg%2F20200914%2Fedb530a4-ee65-418b-8ccd-817901708785.jpg&refer=http%3A%2F%2Fpad.mydrivers.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675006050&t=65f71393bd1b1a79e46de2426a138c8e',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fthing_review%2Fl%2Fpublic%2Fp5949058.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675006262&t=d278bab5b13c564fcebb2db5174236a5',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftxt25-2.book118.com%2F2018%2F0609%2Fbook171652%2F171651186.jpg&refer=http%3A%2F%2Ftxt25-2.book118.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675006382&t=dc634db7fa61be19f96f4dce5c420c91'
      ],
    }
  },
  created() {
    this.load()
  },
  methods:{
    add(bookid){
      this.recommends.user_id = this.user.id
      this.recommends.book_id = bookid
      request.put ("/api/recommend/addRecommend",this.recommends).then(res => {
        console.log(res)
        if(res.code === '0'){
          this.$message({
            type:"success",
            message: "收藏成功"
          });
          this.recommendState = true
          console.log(this.recommendState)
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()   //刷新表格数据
      })
    },
    detail(row) {
      //查看详情
      this.$router.push({ path: "mediaContent/" + row.id });
    },
    load(){
      request.get("/api/book/all", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res.data)
        this.booksData = res.data
        this.total = res.data.total
      })
    },
    handleSizeChange(){   //改变当前每页的个数触发
      this.load()
    },
    handleCurrentChange(){    //改变当前页码触发
      this.load()
    }
  }
}
</script>

<style scoped>
.demo-image__placeholder .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
}

img:hover{
  cursor: pointer;
}
</style>